<!DOCTYPE html><html lang="zh-CN" data-nav-level="1" data-nav-name="商品详情" data-nav-seq="2"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/product-details.css">
<base href="/html/"><script src="js/mcp-prototype-inject.js" defer=""></script></head>
<body>
    <div class="product-container">
        <div class="product-image">
            <img src="img/product-image.svg" alt="商品图片">
        </div>
        <div class="product-info">
            <h1 class="product-title" data-marker="商品标题">商品名称</h1>
            <div class="product-price" data-marker="商品价格">¥99.00</div>
            <div class="product-description">
                <h3>商品描述</h3>
                <p>这里是商品的详细描述信息，包括材质、尺寸、使用方法等。</p>
            </div>
            <div class="product-actions">
                <button id="addToCart" class="add-to-cart" data-marker="加入购物车按钮">加入购物车</button>
            </div>
        </div>
    </div>
    
    <div class="feature-section" data-marker="特性描述区">
      <h2 data-marker="特性标题1">产品特性1</h2>
      <p data-marker="特性描述1">这里是产品第一个特性的详细描述内容，包含该特性的优势和使用场景说明。文字内容足够长以确保页面能够超出一屏显示。</p>
      
      <h2 data-marker="特性标题2">产品特性2</h2>
      <p data-marker="特性描述2">这里是产品第二个特性的详细描述内容，包含该特性的技术参数和性能指标。文字内容足够长以确保页面能够超出一屏显示。</p>
      
      <h2 data-marker="特性标题3">产品特性3</h2>
      <p data-marker="特性描述3">这里是产品第三个特性的详细描述内容，包含该特性的创新点和用户价值。文字内容足够长以确保页面能够超出一屏显示。</p>
      
      <h2 data-marker="特性标题4">产品特性4</h2>
      <p data-marker="特性描述4">这里是产品第四个特性的详细描述内容，包含该特性的应用案例和用户反馈。文字内容足够长以确保页面能够超出一屏显示。</p>
    </div>
    
    <script src="js/product-details.js"></script>

<button class="test-marker-button" data-marker="测试按钮，这是一个很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的提示" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">测试按钮</button>

</body></html>